const webpack = require('webpack')
// 引入用于 webpack配置文件merge的包
const { merge } = require('webpack-merge')
// 引入通用配置信息
const common = require('./webpack.common')

const config = {
  // webpack5 在HMR的启用上，会因为 package.json 的 browserslist 字段失效
  // 具体解释为webpack判断可能当前项目并非运行在web端
  // 解决办法 1是删除package.json 内的 browserslist，但此处为了保持项目完整性不取
  // 2是此处手动设置为在web端运行的项目，以便 HMR 可以正常工作
  target: 'web',
  // 指定该配置为开发模式
  mode: 'development',
  devtool: 'inline-source-map',
  // 配置开发服务器
  devServer: {
    // 关闭启动时自动打开浏览器
    open: false,
    // 配置启动端口号
    port: 10086,
    host: 'localhost',
    // 开启压缩
    compress: true,
    // 开启HMR
    hot: true,
    // 公共路径继承基础配置内的设置
    publicPath: common.output.publicPath,
    watchOptions: {
      poll: 1000  // 每秒检查一次
    },
    proxy: {
      // 在此处配置接口转发规则
      '/api': {
        target: 'http://localhost:3000',
        pathRewrite: {'^/api' : ''}
      }
    }
  },
  plugins: [
    // 启用 HMR 所需的最基础插件
    new webpack.HotModuleReplacementPlugin()
  ]
}

module.exports = merge(common, config)